<template>
  <view>
    <view class="address-window" :class="value === true ? 'on' : ''">
      <div class="head">
        <div class="head-title">选择地址</div>
        <div class="del" @click="closeAddress">
          <image class="del-icon" src="https://cos.aitshirt.cn/app-icon/del.png" />
        </div>
      </div>
<!--      <view class="title">-->
<!--        选择地址-->
<!--        <text class="iconfont icon-guanbi" @click="closeAddress"></text>-->
<!--      </view>-->
      <view v-if="addressList.length" class="list">
        <view v-for="(item, addressIndex) in addressList" :key="addressIndex" class="item acea-row row-between-wrapper" :class="item.id === checked ? 'font-color-red' : ''" @click="tapAddress(addressIndex)">
          <text class="iconfont icon-ditu" :class="item.id === checked ? 'font-color-red' : ''"></text>
          <view class="addressTxt">
            <view class="name" :class="item.id === checked ? 'font-color-red' : ''">
              {{ item.realName }}
              <text class="phone">{{ item.phone }}</text>
            </view>
            <view class="line1"> {{ item.province }}{{ item.city }}{{ item.district }}{{ item.detail }} </view>
          </view>
          <text class="iconfont icon-complete" :class="item.id === checked ? 'font-color-red' : ''"></text>
        </view>
      </view>
      <view v-if="addressList.length < 1" class="pictrue">
        <image :src="`https://cos.aitshirt.cn/app-icon/%E7%BB%84%2014%402x.png`" class="image" />
      </view>
      <view class="addressBnt bg-color-red" @click="goAddressPages">新加地址</view>
    </view>
    <view class="mask" :hidden="value === false" @touchmove.prevent @click="closeAddress"></view>
  </view>
</template>
<script>
import { getAddressList } from '@/api/user';
import { _router } from '@/utils/oldIndex';

export default {
  name: 'AddressWindow',
  props: {
    value: Boolean,
    checked: Number,
  },
  data: function () {
    return {
      addressList: [],
      current: 0,
      cartId: 0,
      pinkId: 0,
      couponId: 0,
    };
  },
  mounted: function () {},
  methods: {
    getAddressList: function () {
      console.log('getAddressList -------------------------', this.$props);
      let that = this;
      getAddressList().then((res) => {
        that.addressList = res.data;
      });
    },
    closeAddress() {
      this.$emit('input', false);
    },
    goAddressPages: function () {
      _router.push({ path: '/pages/user/AddAddress/AddAddress' });
      this.$emit('redirect');
    },
    tapAddress: function (index) {
      this.$emit('checked', this.addressList[index]);
      this.$emit('input', false);
    },
  },
};
</script>

<style lang="less">
.head {
  position: relative;
  padding: 32rpx 0 0;
  .head-title {
    height: 42rpx;
    font-weight: bold;
    font-size: 32rpx;
    color: #222222;
    line-height: 42rpx;
    text-align: center;
  }
  .del {
    position: absolute;
    top: 32rpx;
    right: 32rpx;
    padding: 0 0 0 20rpx;
    .del-icon {
      width: 24rpx;
      height: 24rpx;
    }
  }
}
</style>
